/*
 * @Author: your name
 * @Date: 2020-09-07 17:56:10
 * @LastEditTime: 2020-12-12 18:16:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /frontend-spiders/src/Pages/Home/index.ts
 */
import React, { Component } from 'react'
import './style.css'
import { Redirect, Link } from 'react-router-dom'
import request from '../../request'
import ReactEcharts from 'echarts-for-react'
import moment from 'moment'
import { Button, Spin, message } from 'antd'

interface CourseItem {
  title: string
  count: number
}

interface DataStructure {
  [key: string]: CourseItem[]
}

interface State {
  loading: boolean
  isLogin: boolean
  data: DataStructure
}

class Home extends Component {
  state: State = {
    loading: true,
    isLogin: true,
    data: {},
  }

  componentDidMount() {
    request
      .get(
        '/api/io/standardDataUpload/downloadTemplate?standardCollectionId=72897'
      )
      .then((res) => {
        debugger
      })
    request.get('/api/isLogin').then((res) => {
      const data: boolean = res.data
      if (!data) {
        this.setState({
          isLogin: false,
          loading: false,
        })
      } else {
        this.setState({
          loading: false,
        })
      }
    })

    request.get('/api/showData').then((res) => {
      const data = res.data
      if (data) {
        this.setState({ data })
      }
    })
  }

  handleCrowllerClick = () => {
    request.get('/api/getData').then((res) => {
      const data: boolean = res.data
      if (data) {
        message.success('爬取成功')
      } else {
        message.error('退出失败')
      }
    })
  }

  handleWenCaiCrowllerClick = () => {
    request.get('/api/iWenCai').then((res) => {
      const data: boolean = res.data
      if (data) {
        message.success('爬取成功')
      } else {
        message.error('退出失败')
      }
    })
  }
  handleWenCaiYaoClick = () => {
    request.get('/api/iWenYg').then((res) => {
      const data: boolean = res.data
      if (data) {
        message.success('爬取成功')
      } else {
        message.error('退出失败')
      }
    })
  }

  handleLogoutClick = () => {
    request.get('/api/logout').then((res) => {
      const data: DataStructure = res.data
      if (data) {
        this.setState({
          isLogin: false,
        })
      } else {
        message.error('退出失败')
      }
    })
  }

  getOption: () => echarts.EChartOption = () => {
    const { data } = this.state
    const courseNames: string[] = []
    const times: string[] = []
    const tempData: {
      [key: string]: number[]
    } = {}
    for (let i in data) {
      const item = data[i]
      times.push(moment(Number(i)).format('MM-DD HH:mm'))
      item.forEach((innerItem) => {
        const { title, count } = innerItem
        if (courseNames.indexOf(title) === -1) {
          courseNames.push(title)
        }
        tempData[title]
          ? tempData[title].push(count)
          : (tempData[title] = [count])
      })
    }
    const result: echarts.EChartOption.Series[] = []
    for (let i in tempData) {
      result.push({
        name: i,
        type: 'line',
        data: tempData[i],
      })
    }
    return {
      title: {
        text: '课程在线学习人数',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: courseNames,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times,
      },
      yAxis: {
        type: 'value',
      },
      series: result,
    }
  }

  render() {
    const { isLogin, loading } = this.state
    if (isLogin) {
      return (
        <Spin spinning={loading}>
          <div className="home-page">
            <div className="buttons">
              <Button
                type="primary"
                style={{ marginRight: '25px' }}
                onClick={this.handleCrowllerClick}
              >
                爬课程
              </Button>
              <Button
                type="primary"
                style={{ marginRight: '25px' }}
                onClick={this.handleWenCaiCrowllerClick}
              >
                爬问财
              </Button>
              <Button type="primary" style={{ marginRight: '25px' }}>
                <Link to="/keyWord">查看问财</Link>
              </Button>
              <Button
                type="primary"
                style={{ marginRight: '25px' }}
                onClick={this.handleWenCaiYaoClick}
              >
                爬妖
              </Button>
              <Button type="primary" style={{ marginRight: '25px' }}>
                <Link to="/yg">查看妖</Link>
              </Button>
              <Button type="primary" onClick={this.handleLogoutClick}>
                退出
              </Button>
            </div>
            <ReactEcharts option={this.getOption()} />
          </div>
        </Spin>
      )
    } else {
      return <Redirect to="login" />
    }
  }
}

export default Home
